<!-- 问答页面 -->
<template>
  <div>
    <!-- 导航栏 -->
    <div>
      <div class="s30153804">
        <span class="s7d4f25eb" style="float: left; color: #e98b71">提问</span>
        <span class="s-3613cfc6" style="float: right">
          <img alt="" title="" src="../assets/NavPic/more.jpg" class="s-6a5cf0dc" />
        </span>
        <div class="s2ca81225">
          <div class="s60de47cb">
            <span class="s-3448c132">搜索问题</span>
            <input class="s-362be723" />
          </div>
        </div>
      </div>
      <div class="s7e1f0f36"></div>
    </div>
    <!-- 标签页 -->
    <van-tabs v-model="active">
      <van-tab title="精华问答">
        <div class="s7e642914">
          <EssQuesAndAns v-for="i in 5" :key="i"></EssQuesAndAns>
          <Load></Load>
        </div>
      </van-tab>
      <van-tab title="最新问题">
        <div class="s7e642914">
          <LatestProblem v-for="i in 5" :key="i"></LatestProblem>
          <Load></Load>
        </div>
      </van-tab>
      <van-tab title="最热问题">
        <div class="s7e642914">
          <LatestProblem v-for="i in 5" :key="i"></LatestProblem>
          <Load></Load>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import EssQuesAndAns from '@/components/QuestionAndAnswer/EssQuesAndAns.vue'
import LatestProblem from '@/components/QuestionAndAnswer/LatestProblem.vue'
import Load from '@/components/phone/Load.vue'
export default {
  components: { EssQuesAndAns, LatestProblem, Load },
  data() {
    return {
      active: 1,
    }
  },
}
</script>

<style lang="scss" scoped>
// 导航栏
.s30153804 {
  background: #ffffff;
  height: 44px;
  z-index: 6;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 0 18px;
  margin: 0 auto;
  max-width: 600px;
  box-sizing: border-box;
}
.s7e1f0f36 {
  height: 44px;
  overflow: hidden;
  zoom: 1;
}
.s7d4f25eb {
  margin: 7px 0;
  position: relative;
  z-index: 1;
  font-size: 16px;
  line-height: 30px;
  color: #4a4945;
  float: left;
}
.s-3613cfc6 {
  font-size: 0;
  height: 44px;
  display: inline-block;
  cursor: pointer;
  text-align: center;
  position: relative;
  z-index: 1;
}
.s-6a5cf0dc {
  width: 27px;
  height: 27px;
  margin: 9.5px 0;
}
.s2ca81225 {
  text-align: left;
  height: 35px;
  margin: 4.5px 50px;
}
.s60de47cb {
  height: 100%;
  margin: 0 auto;
  border-radius: 4px;
  zoom: 1;
  background-color: #f5f7f9;
  box-sizing: border-box;
  padding: 0 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.s-3448c132 {
  color: #4a4945;
  font-size: 14px;
  vertical-align: middle;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.s-362be723 {
  height: 0;
  width: 0;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}
input {
  line-height: normal;
}
//标签页组件样式修改
::v-deep .van-tabs--line .van-tabs__wrap {
  height: 30px;
  margin: 8px 0;
}
::v-deep .van-tab {
  font-size: 14px;
  color: #999999;
}
::v-deep .van-tab--active {
  color: #4a4945;
  font-weight: bold;
}
::v-deep .van-tabs__line {
  width: 50px;
  height: 2px;
  margin: 0 auto;
  border-radius: 20px;
  background-color: #e98b71;
}
::v-deep .van-tabs {
  height: calc(100vh - 50px);
}
::v-deep .van-tabs__content {
  height: calc(100% - 88px);
  overflow: auto;
  background-color: #f5f7f9;
}
// 标签页精华问答
.s7e642914 {
  position: relative;
  overflow: hidden;
  zoom: 1;
  background-color: #ffffff;
  box-sizing: border-box;
  padding: 0 15px;
}
</style>